<template>
    <div class="classification">
        <div class="title">全部分类</div>
        <div class="list clearfix" v-for="i in list" :key="i.id">
           <div class="list-title">
               <img :src="i.img" alt="">
               <span>{{i.title}}</span>
           </div>
            <ul>
              <li v-for="(y,k) in i.child" :key="k">{{y.class}}</li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Classification",
        props:['list']
    }
</script>

<style scoped lang="less">
    .classification{
        >:nth-child(2n+1){
            background-color: #ffeff2;
        }
       .title{
            height: 42px;
            background-color: #ff97a8;
            font-size: 20px;
            color: #ffffff;
            text-align: center;
            line-height: 42px;
        }
        .list{
            padding:15px;
            .list-title{
                span{
                    font-size: 16px;
                    color: #333333;
                    padding-left: 10px;
                    vertical-align: top;
                }
                img{
                    margin-top: 5px;
                }
            }
            ul{
                li{
                    float: left;
                    margin-top: 15px;
                    font-size: 13px;
                    color: #666666;
                    width: 33%;
                }
            }

        }
    }

</style>